<template>
  <div id="water-page" class="page-container">
    <div id="header"></div>
    <div id="body">
      <div id="left-container">
        <div class="item item-1" :class="{ active: currentItem == 'item1' }" @click="toItem('item1')"></div>
        <div class="item item-2" :class="{ active: currentItem == 'item2' }" @click="toItem('item2')"></div>
        <div class="item item-3" :class="{ active: currentItem == 'item3' }" @click="toItem('item3')"></div>
        <div class="item item-4" :class="{ active: currentItem == 'item4' }" @click="toItem('item4')"></div>
      </div>
      <div id="right-container">
        <img :src="image" alt="" class="img">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, provide, watch, ref } from "vue";
import warningImage1 from "../../assets/warning-image1.png";
import warningImage1_high from "../../assets/warning-image1-high.png";
import warningImage2 from "../../assets/warning-image2.png";
import warningImage2_high from "../../assets/warning-image2-high.png";
import warningImage3 from "../../assets/warning-image3.png";
import warningImage3_high from "../../assets/warning-image3-high.png";
import warningImage4 from "../../assets/warning-image4.png";
import warningImage4_high from "../../assets/warning-image4-high.png";

/**
 * 红色预警（特大洪水）：50年一遇
 * 橙色预警（大洪水）：20-50年一遇
 * 黄色预警（中洪水）：5-20年一遇
 * 蓝色预警（小洪水）：小于5年
 */
export default defineComponent({
  setup() {
    const yearValue: any = ref(localStorage.getItem('yearValue'))
    let image = ref('')
    let currentItem = ref('item1')
    // let warningImage1 = "../../assets/warning-image1.png"
    image.value = warningImage1

    if (Number(yearValue.value) >= 50) {
      toItem('item1')
    } else if (Number(yearValue.value) >= 20 && Number(yearValue.value) < 50) {
      toItem('item2')
    } else if (Number(yearValue.value) >= 5 && Number(yearValue.value) < 20) {
      toItem('item3')
    } else if (Number(yearValue.value) < 5) {
      toItem('item4')
    }

    function toItem(name: string) {
      if (name == currentItem.value) {
        return
      }
      currentItem.value = name
      if (name == 'item1') {
        image.value = warningImage1
      } else if (name == 'item2') {
        image.value = warningImage2
      } else if (name == 'item3') {
        image.value = warningImage3
      } else if (name == 'item4') {
        image.value = warningImage4
      }
    }
    return {
      image,
      currentItem,
      toItem,
      warningImage1
    }
  }
})
</script>

<style scoped>
#water-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('~@/assets/water_page_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#header {
  width: 100%;
  height: 7.5vh;
  margin-top: 1vh;
  overflow: hidden;
  background-image: url('~@/assets/warning-title.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#body {
  display: flex;
  padding: 3vh 3vh;
  height: calc(100% - 10vh);
}

#left-container {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  width: 22vh;
  background: rgba(49, 121, 184, 0.21);
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #14CCFF;
  padding: 2vh;
}

#left-container .item {
  flex: 1;
  margin: 1vh;
  cursor: pointer;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px dashed transparent
}

#left-container .item:hover,
#left-container .item.active {
  background-color: rgba(0, 0, 0, 0.15);
  border: 2px dashed #14CCFF;
}

#left-container .item-1 {
  background-image: url('~@/assets/warning-type1.png');
}

#left-container .item-2 {
  background-image: url('~@/assets/warning-type2.png');
}

#left-container .item-3 {
  background-image: url('~@/assets/warning-type3.png');
}

#left-container .item-4 {
  background-image: url('~@/assets/warning-type4.png');
}

#right-container {
  flex: 1;
  margin-left: 35px;
  height: 100%;
  /* width: 15vw; */
  background: rgba(49, 121, 184, 0.21);
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #14CCFF;
  padding: 3vh;
}

#right-container .img {
  width: 100%;
  height: 100%;
}
</style>
